/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <view class="live">
    <view class="live-header" @click="upLoadImg">
      <view class="cover">
        <image v-if="coverImg" mode="widthFix" :src="coverImg" />
        <i class="iconfont" v-else>&#xe67f;</i>
      </view>
    </view>
    <view class="live-body">
      
      <view class="live-item" @click="showPicker">
        <view class="list-left">
          直播分类
        </view>
        <view class="right">
          <span>{{chooseType.label}}</span>
          <i class="iconfont icon_e60c"></i>
        </view>
      </view>
      
      <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="getNavList?getNavList:[]">
      </mpvue-picker>
         
      <view class="form_items">
        <view class="items_left">
          直播标题
        </view>
        <input class="items_input" v-model="liveTitle" type="text" placeholder="请输入直播标题" maxlength="11">
      </view>
      <view class="form_items">
        <view class="items_left">
          直播描述
        </view>
        <input class="items_input" v-model="liveDescription" type="text" placeholder="请输入直播描述" maxlength="11">
      </view>
	  <view class="form_items">
	    <view class="items_left">
	      直播时间预告
	    </view>
		<view @click='openPopup' class="right">
			{{days[dayIndex]}} - {{hour}}:{{minute}}
		</view>
	  </view>
    </view>
    <view class="live-btn" hover-class="text-hover" @click="toLive">发起直播</view>
	<uni-popup ref="time" type='bottom'>
		<view class="poup_box">
			 <picker-view v-if="visible" indicator-class='select_name' :indicator-style="indicatorStyle" :value="selectValue" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view :class="hour == item? 'item act_item':'item'" v-for="(item,index) in hours" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view :class="minute == item? 'item act_item':'item'" v-for="(item,index) in minutes" :key="index">{{item}}</view>
					</picker-view-column>
			</picker-view>
			<!-- <view class="day_box"> -->
				<view class="dayList">
					<view :class="dayIndex == index ? 'act_day_item day_item':'day_item'" v-for="(item,index) in days" @click="setDayIndex(index)">
						{{item}}
					</view>
				</view>
			<!-- </view>	 -->
			<view class="handle_box">
				<view class="cancel" @click="closePopup">取消</view>
				<view class="query" @click="queryTime">确认</view>
			</view>
		</view>
	</uni-popup>
  </view>
</template>

<script>
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'
export default {
  data() {
	  const date = new Date()
	              const hours = []
	              const minutes = []
				  const days = []
				  const weeks = ['一','二','三','四','五','六','日',]
	              for (let i = 0; i <= 23; i++) {
					  i = i.toString().length == 1? '0'+i:i
	                  hours.push(i)
	              }
				  let hour = hours[date.getHours()]
				  
	              for (let i = 1; i <= 60; i++) {
					  i = i.toString().length == 1? '0'+i:i
	                  minutes.push(i)
	              }
				  let minute = minutes[date.getMinutes()]
				  for(let i = 0;i<7;i++){
					  days.push('每周'+weeks[i])
				  }
    return {
	  dayIndex:date.getDay()-1,
      navList: [],
	  hours,
	  hour,
	  minutes,
	  minute,
	  days,
	  day: '',
	  visible: true,
	  indicatorStyle: 'height: 50px;',
      mode: 'selector',
      chooseList: [],
	  selectValue:[date.getHours(),date.getMinutes()],
      index: 0,
      coverImg: '',
      chooseType: {},
      liveTitle: '',
      liveDescription: '',
      coverImgData: '',
      pickerValueDefault: [0], 
	  pickerValueHour:[
		  '1','2','3','4','5','6','7'
	  ],
	  pickerValue:[2],
	  userInfo:{}
    }
  },
  components: {
    mpvuePicker
  },
  onLoad() {
    this.getTypeList()
	uni.getStorage({
		key:'userInfo',
		success:res=>{
			this.userInfo = JSON.parse( res.data)
		}
	})
    //  this.chooseItem = this.navList[0]
  },
  computed: {
    getNavList() {
      return this.navList.map(res => ({
        label: res.type_name,
        value: res.id
      }))
    }
  },
  methods: {
	   bindChange: function (e) {
		   console.log(e.detail.value)
	                  const val = e.detail.value
	                  this.hour = this.hours[val[0]]
	                  this.minute = this.minutes[val[1]]
	              },
    getTypeList() {
      this.$http.getNavList().then(res => {
        if (res.status === 200) {
          this.navList = res.data.slice(1)
        }
      })
    },
	setDayIndex(index){
		this.dayIndex = index
	},
	openPopup(e){
		console.log(this)
			
		this.$refs.time.open()
	},
	closePopup(){
		this.$refs.time.close()
	},
	queryTime(){
		this.$http.addtrailer({
			shop_id:this.userInfo.shop_id,
			week: this.dayIndex,
			hour: this.hour,
			min: this.minute
		}).then(res=>{
			this.closePopup()
		})
	},
    async bindPickerChange(e) {
      await this.getTypeList()
      this.index = e.target.value
      console.log(this.index)
    },
    
    showPicker() {
      this.$refs.mpvuePicker.show();
    },
    
    toLive() {
      // this.getnav(`/pages/live/Anchor`)
      return
      if (!this.coverImg) {
        return this.$toast('请上传直播封面图')
        
      }
      
      if (Object.keys(this.chooseType).length === 0) {
        return this.$toast('请选择直播分类')
      }
      
      this.$http.launchalive({
        cover: "https://dsx-1306280426.cos.ap-nanjing.myqcloud.com/images/video_cover/20211220/c23f752b6393ad74b3e6f6c9638bc086.jpg",
        cateid: this.chooseType.value[0].id,
        title: this.liveTitle,
        description: this.liveDescription
      }).then(res => {
        if (res.status === 200) {
          uni.setStorage({
            key: 'pushUrl',
            data: res.data,
            success: () => {
              this.getnav(`/platforms/mp-weixin/live-pusher?url=${res.data}`)
            }
          });
          
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onConfirm(e) {
      this.chooseType = e
      this.index = e.index[0]
      
    },
    onChange(e) {
      this.chooseType = e
    },
    onCancel(e) {
      console.log(e);
    },
    upLoadImg() {
      $utils.chooseImg().then(res => {
        this.$loading('上传中')
        uni.uploadFile({
          url: this.$baseUrl + '/api/find/uploadspic',
          filePath: res.tempFilePaths[0],
          name: 'file',
          success: res => {
            
            const data = JSON.parse(res.data)
            
            if (data.code === 200) {
              this.coverImg = data.data.src.wz
              this.coverImgData = data.data.src.dz
              this.$hideLoading()
            } else {
              this.$toast(data.mess)
            }
          },
          fail: err => {
            this.$hideLoading()
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>


.pickerWrap {
  background: #fff;
}

.form_items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24upx;
  background: #fff;
  height: 104upx;
  border-bottom: 1rpx solid #eee;
  position: relative;
  
}

.items_input {
  position: absolute;
  height: 100%;
  width: 75%;
  padding-left: 25%;
}

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24upx;
  color: #333;
  font-size: 30upx;
  border-bottom: 16upx solid #f4f4f4;
  background: #fff;
  margin-top: 14upx;
  
  .cover {
    position: relative;
    margin: 0 auto;
    min-height: 328upx;
    
    image {
      width: 400upx;
      
    }
    
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      color: #FCCB59;
      font-size: 144upx;
      transform: translate(-50%, -50%);
    }
    
  }
}

.live-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 104upx;
  padding: 0 24upx;
  border-bottom: 1upx solid #eee;
  background: #fff;
  
  .right {
    color: #999;
  }
}

.live-content {
  margin-top: 40upx;
  
  .live-content__item {
    display: flex;
    align-items: center;
    margin-bottom: 16upx;
    padding-left: 24upx;
    color: #999;
    font-size: 24upx;
    
    image {
      width: 23upx;
      height: 23upx;
      margin-right: 8upx;
    }
  }
}

.live-btn {
  position: fixed;
  bottom: 40upx;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(to left, #ff0c0c, #ff5c5c);
  color: #ffffff;
  width: 70%;
  border-radius: 200upx;
  height: 88upx;
  line-height: 88upx;
  text-align: center;
  box-shadow: 0 0 10px #ff5c5c;
  font-size: 38upx;
}
.poup_box{
	// height: 40vh;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	.picker-view{
		width: 50vw;
		height: 300rpx;
		/deep/.select_name{
		
			width: 80%;
			left: 10%;
		}
		.item{
			line-height: 50px;
			text-align: center;
		}
		.act_item{
				color: #ff3d3d;
		}
	}

	.dayList {
		text-align: center;
		font-size: 30rpx;
		width: 94vw;
	    overflow-x: scroll!important;
		 // overflow-y:auto!important;
		display: flex;
		color: #333333;
		flex-wrap: wrap;
		touch-action: auto;
		.day_item {
			// display: inline;
			margin: 20rpx 10px;
			font-size: 34rpx;
		    // flex-shrink: 0;
			width: 120rpx;
			// height: rpx;
			background-color: #f5f5f5;
			white-space: nowrap;
			border-radius: 5rpx;
		}
		.act_day_item{
			background-color: #ff3d3d;
			border-radius: 5rpx;
			color: #fff;
		}
	}
	.handle_box{
		display: flex;
		width: 70vw;
		padding: 30rpx 0;
		justify-content: space-between;
		view{
			text-align: center;
			line-height: 80rpx;
		}
		.cancel{
			width: 180rpx;
			height: 80rpx;
			border-radius: 5rpx;
			border: solid 2rpx #ff3d3d;
			font-size: 36rpx;
			color: #FF3d3d;
		}
		.query{
			width: 180rpx;
			height: 80rpx;
			background-color: #ff3d3d;
			border-radius: 5rpx;	
			font-size: 36rpx;
			color: #ffffff;
		}
	}
	
}
</style>
